<template>
	<div class="page_rela_container" style="min-width: 1170px;">
		<div class="scroll_auto flex_cell">
			<div id="page_order_create">
				<el-form
					ref="form"
					:model="form"
					:rules="rules"
					:label-width="$globalCss.formLabelWidth_default"
					class="common-form-panel-div "
				>
					<ex_header_spiler :title="$tt('label_inventory_create')"></ex_header_spiler>
					<el-row>
						<el-col>
							<el-form-item :label="$tt('label_inventory_method')" prop="mode">
								<ex_super_input
									type="select"
									enum="CountOrderModeEnum"
									class="w_fill"
									v-model="form.mode"
								/>
							</el-form-item>
						</el-col>
						<el-col>
							<el-form-item :label="$tt('label_inventory_is_blind')" prop="isBlind">
								<ex_super_input
									type="select"
									enum="YesOrNoEnum"
									class="w_fill"
									v-model="form.isBlind"
								/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<el-form-item :label="$tt('label_inventory_type')" prop="type">
								<ex_super_input
									type="select"
									enum="CountOrderTypeEnum"
									class="w_fill"
									:value="form.type"
									@input="changeType"
								/>
							</el-form-item>
						</el-col>
						<el-col>
							<el-form-item
								:label="$tt('label_stock_type')"
								prop="countStockBizTypeEnum"
							>
								<ex_super_input
									type="select"
									enum="CountStockBizTypeEnum"
									class="w_fill"
									v-model="form.countStockBizTypeEnum"
								/>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row v-show="!isTypeSku && !isTypeCustomer">
						<el-col :span="2">
							<el-form-item :label="$tt('label_inventory_range')" prop="rawData">
								<el-input
									type="textarea"
									class="w_fill"
									:placeholder="
										$tt('tip_type_input_can_comma_separated', {
											type: $enumShow(form.type, 'CountOrderTypeEnum')
										})
									"
									:value="rawDataList"
									clearable
									@input="inputRawData"
								/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-show="isTypeSku">
						<el-col :span="2">
							<el-form-item
								:label="
									$tt([
										$enumShow(form.type, 'CountOrderTypeEnum'),
										'label_quick_select'
									])
								"
								prop="skuIds"
							>
								<sku_selec_input v-model="form.skuIds" class="w_fill" multiple>
								</sku_selec_input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-show="isTypeCustomer">
						<el-col :span="2">
							<el-form-item
								:label="
									$tt([
										$enumShow(form.type, 'CountOrderTypeEnum'),
										'label_quick_select'
									])
								"
								prop="customerIds"
							>
								<common_customer_choose
									v-model="form.customerIds"
									multiple
									class="w_fill"
									:option="{ label: 'code', value: 'code' }"
								/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-show="isTypeArea">
						<el-col :span="2">
							<el-form-item
								:label="
									$tt([
										$enumShow(form.type, 'CountOrderTypeEnum'),
										'label_quick_select'
									])
								"
								prop="areas"
							>
								<base_area_select
									v-model="form.areas"
									:attrs="{ multiple: true }"
									class="w_fill"
									:option="{ label: 'code', value: 'code' }"
								/>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-show="isTypeLocation">
						<el-col :span="2">
							<el-form-item
								:label="
									$tt([
										$enumShow(form.type, 'CountOrderTypeEnum'),
										'label_quick_select'
									])
								"
								prop="locations"
							>
								<base_location_select
									v-model="form.locations"
									:attrs="{ multiple: true }"
									:checkArea="false"
									class="w_fill"
									:option="{ label: 'code', value: 'code' }"
								/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
		<div class="page_rela_bottom_area">
			<template>
				<el-button type="primary" @click="submit">{{ $tt('label_save') }}</el-button>
				<el-button @click="return_page_back">{{ $tt('label_cancel') }}</el-button>
			</template>
		</div>
	</div>
</template>

<script>
import router_params from '@/mixin/router_params'
let _default_form = {
	mode: 'DYNAMIC_COUNT',
	countUser: '',
	countStockBizTypeEnum: 'ALL',
	type: 'LOCATION',
	isBlind: 'N',
	// rawData: '',
	skuIds: [],
	customerIds: [],
	locations: [],
	areas: []
}

export default {
	components: {},
	name: 'count_create',
	title: 'label_inventory_create',
	mixins: [router_params],
	data() {
		return {
			rules: {
				mode: [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
				type: [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
				isBlind: [
					{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }
				],
				skuIds: {
					required: true,
					validator: (r, v, cb) => {
						this.isTypeSku && _.isEmpty(v) ? cb(this.$tt('tip_can_no_empty')) : cb()
					}
				},
				customerIds: {
					required: true,
					validator: (r, v, cb) => {
						this.isTypeCustomer && _.isEmpty(v)
							? cb(this.$tt('tip_can_no_empty'))
							: cb()
					}
				},
				locations: {
					required: true,
					validator: (r, v, cb) => {
						this.isTypeLocation && _.isEmpty(v)
							? cb(this.$tt('tip_can_no_empty'))
							: cb()
					}
				},
				areas: {
					required: true,
					validator: (r, v, cb) => {
						this.isTypeArea && _.isEmpty(v) ? cb(this.$tt('tip_can_no_empty')) : cb()
					}
				}

				// rawData: [{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' }],
			},
			form: _.cloneDeep(_default_form)
		}
	},
	computed: {
		isTypeSku() {
			return this.form.type === 'SKU'
		},
		isTypeLocation() {
			return this.form.type === 'LOCATION'
		},
		isTypeArea() {
			return this.form.type === 'AREA'
		},
		isTypeCustomer() {
			return this.form.type === 'CUSTOMER'
		},
		rawDataList() {
			if (this.isTypeSku) return this.form.skuIds.join(',')
			if (this.isTypeCustomer) return this.form.customerIds.join(',')
			if (this.isTypeLocation) return this.form.locations.join(',')
			if (this.isTypeArea) return this.form.areas.join(',')
		}
	},
	methods: {
		changeType(e) {
			this.form.type = e
			// this.form.rawData = ""
		},
		inputRawData(e) {
			// this.form.rawData = e.trim()
			if (this.isTypeSku) {
				this.form.skuIds = e.split(',')
			} else if (this.isTypeCustomer) {
				this.form.customerIds = e.split(',')
			} else if (this.isTypeLocation) {
				this.form.locations = e.split(',')
			} else if (this.isTypeArea) {
				this.form.areas = e.split(',')
			}
		},
		changeList(e) {
			if (!e) this.form.rawData = ''
			this.form.rawData = e.join(',')
		},
		submit() {
			if (this.$clickFast()) return
			this.$refs['form'].validate((valid, obj) => {
				if (valid) {
					let data = _.cloneDeep(this.form)
					// if (this.isTypeSku) {
					//   data.skuId = data.rawData
					// }
					this.$ajax({
						url: '/wms-api/inside/CountOrderRpc/save.json',
						type: 'json',
						loading: true,
						method: 'post',
						data,
						success: res => {
							this.$message.success(this.$tt('tip_submit_success'))
							this.return_emit(null, 'reload')
							this.return_page_back()
						}
					})
				} else {
					this.$message.error(this.$tt('form_validate_error'))
					return false
				}
			})
		}
	}
}
</script>

<style scoped></style>
